بازدید امروز : 18
بازدید دیروز : 1
کل بازدید : 12123
کل یادداشتها ها : 11
------------------------------------------------------
اهداف :
1- قرار دادن تصاویر در متن
2- استفاده از تصاویر در پس زمینه
3- لینک های (پیوندهای) تصویری
یکی از بخش های مهم و درعین حال جالب طراحی صفحات استفاده از تصاویر برای زیباسازی صفحات هست. برای اینکه بتوانیم یک تصویر را در صفحه ی وب خود نمایش دهیم نیاز به تگ <img> داریم . این تگ از جمله تگهایی می باشد که دارای تگ خاتمه نیست.
با یک مثال نحوه ی استفاده از این تگ را توضیح می دهیم:
همونطور که در مثال بالا مشاهده می کنید از چند مشخصه در تگ <img> استفاده کردیم ، به طور کلی همراه با تگ img باید 4 مشخصه را استفاده کنیم ( به عبارتی تگ img دارای 4 مشخصه الزامی است ) :
سایر مشخصه هایی که میتوانید استفاده کنید عبارتند از :
Title مشخصه ایست که مقدار تعلق گرفته به آن هنگامی که ماوس روی تصویر قرار می گیرد نمایش داده می شود و می تواند توضیحی بیشتر درباره ی تصویر باشد.
مشخصه های دیگری نیز برای تصاویر بکار برده می شوند که عبارتند از :
Border : مقدار حاشیه ی تصویر را نشان می دهد و مقداری عددی می باشد در مقیاس پیکسل و در صورتی که مقدار 0 را داشته باشد حاشیه نمایش داده نمی شود.
Align : برای ترازبندی تصویر بکار می رود و مقادیری از جمله right ، left ، top ، middle ، bottom ، absbottom ، absmiddle و … را دریافت می کند.
در مثال زیر تصویر با اندازه ی 200 پیکسل در 300 پیکسل نمایش داده میشود :
توجه کنید تگ تصاویر دارای تگ خاتمه نیست و با یک / بسته می شود.
تمرین 1-7 :
درون فولدر mypage یک صفحه وب با نام index.html ایجاد کنید و تصویر دلخواه خود را در آن نمایش دهید . ( تصویر مورد نظر در فولدر mypage و در مکانی که index.html وجود دارد ، قرار دارد .
تمرین 2-7 :
تمرین قبل را مجددا تکرار کنید ولی اینبار تصویر را در سمت راست صفحه نمایش دهید .
برای اینکه بتوانیم از تصاویر در پس زمینه استفاده کنیم ، همانطور که در درس جداول ذکر شد ، از مشخصه ی background استفاده می کنیم و از آنجایی که قصد داریم این تصویر در پس زمینه ی صفحه ی ما قرار بگیرد از این مشخصه در تگ <body> استفاده می کنیم.
همچنین با همین شیوه می توان بجای تصویر رنگ خاصی را به عنوان رنگ زمینه تعیین نمود ، تنها کافی است مقدار تعلق گرفته به مشخصه را کد رنگ و یا نام رنگ تعریف کنیم:
همانطور که دیدید از مشخصه ی bgcolor نیز می توان بهره گرفت.
تمرین 3-7 :
تصویر تمرین قبل را به عنوان تصویر زمینه صفحه وب خود قرار دهید .
* توجه داشته باشید که این نکات تنها برای یادگیری این درس است و در عمل بهتر است برای اینکار از css بهره بگیرید .
هنگامی این روش کاربرد دارد که بخواهیم یک دکمه را در سایت یا صفحه نمایش دهیم تا با کلیک بر روی آن دکمه کاربر به صفحه ی جدیدی رهنمود شود و یا فایلی را دانلود کند. برای این امر شما همه چیز را می دانید تنها کافی است آموخته های درس پیش را با این درس تلفیق کنید!!!
ساختار کلی به این شکل است :
به همین سادگی! به همین خوشمزگی!
پاسخ تمرینات:
پاسخ تمرین 1-7 :
همانطور که در متن تمرین گفته شد ، تصویر دلخواه ما ( که در اینجا picture.jpg نام دارد ) به همراه صفحه index.html درون پوشه ی mypage قرار دارند . پس برای نمایش دادن تصویر در صفحه ایندکس باید اینطور بنویسیم :
در کد بالا اندازه های طول و عرض تصویر به صورت فرضی وارد شده اند ، شما باید اندازه دقیق تصویری که استفاده میکنید وارد کنید .
فرض کنید تصویر ما که در حال حاضر درون فولدر mypage قرار دارد ، درون پوشه ی image قرار داده شود ( پوشه image درون پوشه mypage قرار دارد ) ، در اینصورت آدرس تصویر اینطور خواهد بود :
حتما متوجه شده اید که از آدرس دهی نسبی استفاده کرده ایم .
پاسخ تمرین 2-7 :
برای اینکه تصویر را در سمت راست نمایش دهیم از مشخه ی align استفاده میکنیم و مقدار آن را برابر right قرار میدهیم :
کد بالا را ذخیره و مشاهده کنید سپس با تغییر مقدار right به center تغییرات را دوباره مشاهده کنید .
پاسخ تمرین 3-7 :
برای اینکه تصویر را به عنوان تصویر زمینه نمایش دهید نیازی نیست که از تگ img استفاده کنیم . تنهاکاری که میکنیم این است که آدرس تصویر را در تگ body و با مشخصه background مشخص میکنیم :
قطعه کد بالا را ذخیره و نتیجه را مشاهده کنید . توجه کنید که اگر تصویر درون پوشه ی دیگری قرار داشته باشد باید آدرس نسبی و یا مطلق آن را وارد کنید . مثلا اگر تصویر درون پوشه pic باشد و پوشه ی pic درون پوشه image و پوشه image درون پوشه ی mypage باشد ، آدرس تصویر بدین گونه خواهد بود :
امیدوارم با انجام تمرینات درس رو درک کرده باشید و بازهم تاکید میکنم که برای قرار دادن تصویر به عنوان تصویر زمینه حتما از css استفاده کنید .
